<template>
  <div>
    <a-card  id="card" style="height: 380px;">
      <div slot="title">
        <a><img class="img" src="../../img/ruanjian.png"></a>
        <span  class="span">{{title}}</span>
     <!--   <a-button type="text" style="float: right" @click="toolAll">全部</a-button>-->
      </div>
      <div v-for="(row,index) in list" :key="'item'+index" style="width: 120px;height: 120px;margin: 0px 12px 0px 12px;float: left;">
        <app-card :file="row"/>
      </div>

      <div v-for="(item,index) in servers" :key="'item'+index+'-only'" style="width: 120px;height: 120px;margin: 0px 12px 0px 12px;float: left;">
        <a style="margin-left: 10px">
   <!--       <router-link :to="{ path: path }" >-->
            <span :title="item.userName" @click="applyConsole2()">
              <img style="width: 70px;height: 70px;margin: 0px 12px 0px 12px;float: left;" src="../../img/fuwu.jpg"/>
            </span>
        <!--  </router-link>-->
        </a>

      </div>

    </a-card>
  </div>
</template>
<script>
import myServerList from '@/views/server/MyServerList'
import ServerModal from '@/views/server/modules/ServerModal'
import AppCard from '@/views/components/tools/app-card'
import {getMyTools} from '@/api/home.js'
import {serverlist,abc} from '@/api/server'
export default {
  components: {
    AppCard,
    myServerList,
    ServerModal
  },
  data () {
    return {
      title: '工具仓',
      list: [],
      servers:[],
/*      path: '/iserver/myserver',*/
      applyConsole:"",
      url: {
        applyConsole:"/sys/serVirtual/applyConsole"

      }
    }
  },
  created () {
    this.fetchData()
    this.fetchServer()
  },
  methods: {
    fetchData () {
      let that = this
      const details = [{
        url: "https://developer.oracle.com/java/",
        icon: 'Java',
        name: 'JAVA',
        uploadId: 1,
        departmentId: 1,
        departmentType: 1,
        uploadTime: '2019-02-15 12:21:30',
        downloadCount: 1,
        status: 1,
        type: 1,
        description: 'Java具有简单性、面向对象、分布式、健壮性、安全性、平台独立与可移植性、多线程、动态性等特点',
        date: '12-07',
        local: false,
        white: false
      },
        {
          url: "http://www.vcchar.com/",
          icon: 'VC',
          name: 'VC',
          uploadId: 1,
          departmentId: 1,
          departmentType: 1,
          uploadTime: '2019-02-15 12:21:30',
          downloadCount: 1,
          status: 1,
          type: 1,
          description: 'VC++集成了便利的除错工具，特别是集成了微软Windows视窗操作系统应用程序接口（Windows API）、三维动画DirectX API，Microsoft .NET框架。',
          date: '12-07',
          local: false,
          white: false
        },
        {
          url: "http://c.biancheng.net/c/10/",
          icon: 'c',
          name: 'C语言',
          uploadId: 1,
          departmentId: 1,
          departmentType: 1,
          uploadTime: '2019-02-15 12:21:30',
          downloadCount: 1,
          status: 1,
          type: 1,
          description: 'C语言是一门面向过程的、抽象化的通用程序设计语言，广泛应用于底层开发。C语言能以简易的方式编译、处理低级存储器。',
          date: '12-07',
          local: false,
          white: false
        },
        {
          url: "https://www.python.org/",
          icon: 'python',
          name: 'Python',
          uploadId: 1,
          departmentId: 1,
          departmentType: 1,
          uploadTime: '2019-02-15 12:21:30',
          downloadCount: 1,
          status: 1,
          type: 1,
          description: 'Python是一种跨平台的计算机程序设计语言。 是一个高层次的结合了解释性、编译性、互动性和面向对象的脚本语言。',
          date: '12-07',
          local: false,
          white: false
        }]
      that.list = details
      // getMyTools().then((data)=>{
      //   that.list = [].concat(data.content).slice(0, 8)
      // })

    },
    fetchServer() {
      const vm = this
      serverlist().then(res => {
        vm.servers = [].concat(res.result.records).slice(0,10)

      })
    },
    toolAll () {
      this.$router.push({ path: '/tool' })
    },
    applyConsole2(){
        //getAction(this.url.applyConsole,{});
        abc(this.url.applyConsole).then((res) =>{
          /*     async: false,*/
          console.log(res);
          if(res.console1='1'){
            console.log("kankanaknakn:++++++"+res.addrResult);
            window.open(res.addrResult,"_blank");
          }else{
            alert("云主机停止状态！");
            res;
          }
        });


    }
  }
}
</script>
<style scoped>
  .ant-card-bordered {
    border: 0px;
  }
  #card{
    background: transparent;
    background-image: url("../../img/gongjucang.png");
    background-size:100% 100%;
    background-repeat: no-repeat;
  }
  .img{
    width:20px;
    height: 20px;
    margin-left: 20px;
  }
  span{
    padding: 10px;
  }
  .imgs{
    width:20px;
    height: 20px;
  }
</style>
